<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欧品位数据平台</title>
</head>
<style>
    .back {
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        margin-left: 50px;
    }

    .back .title {
        line-height: 60px;
        font-size: 36px;
        margin-bottom: 27px
    }

    table tr th, td {
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        padding: 0 20px;
    }

    table tr th {
        color: #01f4fa;
        border-bottom: 1px solid #01f4fa;
    }

    table tr td {
        border-bottom: 1px solid #688cb8;
    }

    .table-container {
        width: 100%;
        height: 700px; /* 根据需要调整高度 */
        overflow-y: auto;
        scrollbar-width: none; /* 隐藏Firefox滚动条 */
        -ms-overflow-style: none; /* 隐藏IE/Edge滚动条 */
    }
</style>
<body style="background-color: #01065E;color: #ffffff;width: 1920px;">
<div style="width: 100%;height: 100px;background-image:url('/img/img1.png') ">
    <span style="font-size: 24px; display: block; padding: 50px 100px;" id="date">2023年7月16日</span>
</div>
<div style="display:flex;margin-top: 50px;">
    <div class="back" style="width: 718px;height:869px;background-image:url('/img/img2.png');">
        <span class="title">实时画面</span>
    </div>
    <div class="back" style="width: 1085px;height:869px;background-image:url('/img/img3.png');">
        <span class="title">数据看板</span>
        <div class="table-container">
            <table style="border-collapse: collapse;">
                <tr>
                    <th>序号</th>
                    <th>生产线</th>
                    <th>计划投产数量</th>
                    <th>实际生产数量</th>
                    <th>达成率</th>
                    <th>设备运行</th>
                </tr>
                <tr th:each="monitor,monitorStat : ${monitorList}">
                    <td>[[${monitorStat.count}]]</td>
                    <td>[[${monitor.lineName}]]</td>
                    <td>[[${monitor.planNum}]]</td>
                    <td>[[${monitor.realNum == null ? '\' : monitor.realNum}]]</td>
                    <td>[[${monitor.reachRate == null ? '\' : monitor.reachRate}]]</td>
                    <td th:if="${monitor.runState == 'OK'}" style="color: #4bf428">[[${monitor.runState}]]</td>
                    <td th:if="${monitor.runState != 'OK'}">[[${monitor.runState}]]</td>
                </tr>
            </table>
        </div>

    </div>
</div>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    $(function () {
        setTimeout("location.reload()", 1000 * 30);
        $('#date').html(nowDate());
        // alert("分辨率："+window.screen.width+"==="+window.screen.height);
        // alert("工作区："+window.screen.availWidth+"==="+window.screen.availHeight);
    })

    function nowDate() {
        var time = new Date();
        var y = time.getFullYear();
        var m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
        var d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        var h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        var mm = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        var s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        return y + '年' + m + '月' + d + '日';
    }
</script>
</html>